<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS变量</title>
    <style>
      :root {
        --color: #f498b2;
        --background-color: #fce6ec;
      }
      hi-weekend {
        --primary-color: #fce6ec;
        --text-color: #FFF;
        --bg-color: #f498b2;
      }
    </style>
  </head>
  <body>
    <template id="template">
      <div>Hello Firday</div>
      <div class="wish">Have a nice weekend !</div>
    </template>
    <hello-firday></hello-firday>
    <hi-weekend></hi-weekend>
    <script>
      class HelloFirday extends HTMLElement {
        constructor() {
            super();
            const shadow = this.attachShadow({ mode: "open" });

            const templateDOM = document.getElementById("template");
            const cloneTemplate = templateDOM.content.cloneNode(true);

            const style = document.createElement("style");
            style.innerHTML = `
                    div {
                        margin: 10px;
                        padding: 20px;
                        text-align: center;
                        color: var(--color, white);
                        background-color: var(--background-color, #999);
                    }
                    .wish {
                        color: #fff;
                        background-color: #f498b2;
                    }
                `;
            shadow.appendChild(style);
            shadow.appendChild(cloneTemplate);
        }
      }
      customElements.define("hello-firday", HelloFirday);

      class HiWeekend extends HTMLElement {
        constructor() {
            super();
            const shadow = this.attachShadow({ mode: "open" });
            const div = document.createElement("div");
            div.className = "msg";
            div.innerHTML = "Have a nice weekend !";
            const style = document.createElement("style");
            style.innerHTML = `
                    :host {
                        --primary-color: #007bff;
                        --text-color: #333;
                        --bg-color: white;
                    }

                    .msg {
                        color: var(--text-color);
                        background: var(--bg-color);
                        border: 10px solid var(--primary-color);
                    }
                `;

            shadow.appendChild(style);
            shadow.appendChild(div);
        }
      }
      customElements.define("hi-weekend", HiWeekend);
    </script>
  </body>
</html>
